<template>
  <Modal width="800" v-model="modal" title="查看所有">
    <Form :label-width="100" ref="form" :model="form" class="view-upload" :rules="rules">
      
        <ul v-for="(value, name, index) of uploadList" :key="index">
          <li>
            <FormItem :label="name +'：'" >
              <!-- <div class="ml20">{{name}}：</div> -->
              <ul class="flex-wrap border">
                <li class="mt" v-for="(item, index1) of value" :key="index1">
                  <img  class="img-set mr" :src="item" alt="">
                  <div>
                    <Button class="mr" size="large" type="text" @click="onDownload(item)">下载</Button>
                  </div>
                </li>
              </ul>
            </FormItem>
          </li>
        </ul>
    </Form>
    <div slot="footer">
      <Button class="mr" size="large" type="text" @click="closeModal">关闭</Button>
    </div>
  </Modal>
</template>
<script>
export default {
  data() {
    return {
      modal: false,
      order_id: '',
      uploadList: []
    }
  },
  mounted() {
    // this.getData()
  },
  methods: {
    getData() {
      this.$ajaxGet(`/order/fileList`, {order_id: this.order_id}).then(data => {
        this.uploadList = data
      })
    },
    updataForm(id) {
      this.$refs.form.resetFields()
      this.form = {
        rewardIntegral: '',
        rewardRemark: ''
      }
      this.disabled =  false
      this.company_id = id
      this.openModal()
    },
    openModal(item) {
      this.order_id = item.order_id
      this.modal = true;
      this.getData()
    },
    closeModal() {
      this.modal = false
    },
    downloadIamge(imgsrc, name) {
      var image = new Image();
      // 解决跨域 Canvas 污染问题
      image.src = imgsrc;
      image.setAttribute("crossOrigin", "anonymous");
      image.onload = function() {
        var canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;
        var context = canvas.getContext("2d");
        context.drawImage(image, 0, 0, image.width, image.height);
        var url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
    
        var a = document.createElement("a"); // 生成一个a元素
        var event = new MouseEvent("click"); // 创建一个单击事件
        a.download = name || "photo"; // 设置图片名称
        a.href = url; // 将生成的URL设置为a.href属性
        a.dispatchEvent(event); // 触发a的单击事件
      };
    },
    onDownload(item) {
      this.downloadIamge(item)
    },
    onSave() {
      if (this.disabled) return
      this.disabled = true
      this.$refs["form"].validate(valid => {
        let param = {
          order_id: this.order_id,
          money: Number(this.form.money)
        }
        if (valid) {
          this.$jsonPost(`/order/receiveMoney`, param).then(data => {
            this.closeModal()
            this.$Notice.success({
              title: '操作成功'
            })
            this.$emit("complete")
            this.disabled = false
          }).catch(() => {
            this.closeModal()
            this.disabled = false
          })
        } else {
          this.disabled = false
        }
      })
    }
  }
}
</script>
